<template>
  <div class="body">
    <el-container>
      <!-- 头部导航栏 -->
      <el-header>
        <Index></Index>
      </el-header>
      <!-- 左侧边栏 -->

      <el-container>
        <el-container>
          <el-main>
            <div id="allmap" class>
              <el-row>
                <el-col :span="12">
                  <div class="block" style="margin-left:130px;">
                    <span class="demonstration"
                      ><font style="color:white;size:20px;">选择天:</font></span
                    >
                    <el-date-picker
                      v-model="value1"
                      type="date"
                      placeholder="选择天"
                      @change="selectbytime()"
                    >
                    </el-date-picker>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="block" style="margin-left:130px;">
                    <span class="demonstration"
                      ><font style="color:white;size:1.6rem"
                        >选择月:</font
                      ></span
                    >
                    <el-date-picker
                      v-model="value2"
                      type="month"
                      placeholder="选择月"
                      @change="selectbymonth()"
                    >
                    </el-date-picker>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div id="chart1"></div>
                  <!-- <el-button type="warning" plain>电量数据查询</el-button> -->
                </el-col>
                <el-col :span="12">
                  <div id="chart2"></div>
                  <!-- <el-button type="warning" plain>电量数据查询</el-button> -->
                </el-col>
              </el-row>
            </div>
          </el-main>
        </el-container>
      </el-container>
      <!-- 底部导航栏 -->
      <Bottom></Bottom>
    </el-container>
  </div>
</template>
<script>
// import echarts from 'echarts'
// import MyCircle from '../components/MyCircle.vue'
import Index from '~/components/index2'
import Bottom from '~/components/bottom'

export default {
  data() {
    return {
      // icon: require('@/assets/images/onlinecar.png'),
      activeIndex: '2',

      activeName: 'first',
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      power: [],
      load: []
    }
  },
  components: {
    Index,
    Bottom
  },
  created() {},

  mounted() {
    this.value1 = this.getNowFormatDate()
    this.value3 = this.value1
    this.findbydate()
    this.laterpowercurve()
  },

  methods: {
    selectbymonth() {
      this.value1 = ''
      this.value4 = this.getFormatMonth(this.value2)

      this.findbymonth()
      this.laterpowercurve()
    },
    selectbytime() {
      this.value3 = this.getFormatDate(this.value1)
      this.findbydate()
      this.laterpowercurve()
    },
    //延迟执行函数
    laterpowercurve() {
      setTimeout(() => {
        this.showecharts()
      }, 2000)
    },
    findbydate() {
      this.$axios({
        method: 'get',
        params: {
          date: this.value3
        },
        url: 'http://127.0.0.1:8082/poweranalysis/searchbydate'
      }).then(res => {
        console.log(res.data)

        // this.power = [
        //   { value: res.data.风力发电, name: '风力发电' },
        //   { value: res.data.光伏发电, name: '光伏发电' },
        //   { value: res.data.三联供发电, name: '三联供发电' },
        //   { value: res.data.三联供发电, name: '储能放电' }
        // ]
        // this.load = [
        //   { value: res.data.储能充电, name: '储能充电' },
        //   { value: res.data.空调, name: '空调' },
        //   { value: res.data.照明回路, name: '照明回路' },
        //   { value: res.data.直流排风扇, name: '直流排风扇' }
        // ]
        // this.power = [
        //   { value: 20, name: '风力发电' },
        //   { value: 30, name: '光伏发电' },
        //   { value: 30, name: '三联供发电' },
        //   { value: 20, name: '储能放电' }
        // ]
        // this.load = [
        //   { value: 432, name: '储能充电' },
        //   { value: 243, name: '空调' },
        //   { value: 432, name: '照明回路' },
        //   { value: 532, name: '直流排风扇' }
        // ]

        // this.tableData5 = res.data
        // for (let i = 0; i < res.data.length; i++) {
        //   this.tableData5[i].password = '********'
        // }
      })
    },
    findbymonth() {
      this.$axios({
        method: 'get',
        params: {
          date: this.value4
        },
        url: 'http://127.0.0.1:8082/poweranalysis/searchbymonth'
      }).then(res => {
        console.log(res.data)
        let sum = {
          并网输入: 0,
          光伏发电: 0,
          风力发电: 0,
          储能放电: 0,
          并网负荷: 0,
          储能充电: 0,
          并网输出: 0
        }

        for (let i = 0; i < res.data.length; i++) {
          sum.并网输入 += res.data[i].并网输入
          sum.光伏发电 += res.data[i].光伏发电
          sum.风力发电 += res.data[i].风力发电
          sum.储能放电 += res.data[i].储能放电
          sum.并网负荷 += res.data[i].并网负荷
          sum.储能充电 += res.data[i].储能充电
          sum.并网输出 += res.data[i].并网输出
        }
        console.log(sum)
        console.log(sum.并网输入)
        this.power = [
          { value: sum.并网输入, name: '并网输入' },
          { value: sum.光伏发电, name: '光伏发电' },
          { value: sum.风力发电, name: '风力发电' },
          { value: sum.储能放电, name: '储能放电' }
        ]
        this.load = [
          { value: sum.并网负荷, name: '并网负荷' },
          { value: sum.储能充电, name: '储能充电' },
          { value: sum.并网输出, name: '并网输出' }
        ]
      })
    },
    findalldata() {
      this.$axios({
        method: 'get',
        // params: {
        //   name: '系统结构'
        // },
        url: 'http://127.0.0.1:8082/poweranalysis/searchall'
      }).then(res => {
        console.log(res.data)

        // this.tableData5 = res.data
        // for (let i = 0; i < res.data.length; i++) {
        //   this.tableData5[i].password = '********'
        // }
      })
    },
    showecharts() {
      let myChart1 = this.$echarts.init(document.getElementById('chart1'))
      let myChart2 = this.$echarts.init(document.getElementById('chart2'))
      let option1 = {
        backgroundColor: '#033032',
        title: {
          text: '发电',
          // subtext: '虚构数据',
          left: 'center',
          textStyle: {
            fontSize: 18, //字体大小
            color: '#ffffff' //字体颜色
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          // orient: 'vertical',
          // top: 'middle',
          textStyle: {
            fontSize: 13, //字体大小
            color: '#ffffff' //字体颜色
          },
          bottom: 10,
          left: 'center',
          data: ['风力发电', '光伏发电', '三联供发电', '储能放电']
        },
        color: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple'],
        series: [
          {
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            textStyle: {
              fontSize: 13, //字体大小
              color: '#ffffff' //字体颜色
            },
            label: {
              normal: {
                //饼形图显示格式
                formatter: '{b|{b}}  {per|{d}%}  ',
                rich: {
                  b: {
                    color: 'white',
                    fontSize: 14,
                    lineHeight: 33
                  },
                  //设置百分比数字颜色
                  per: {
                    color: '#00B4FB',
                    fontSize: 14,
                    padding: [2, 4],
                    borderRadius: 2
                  }
                }
              }
            },
            // data: this.power,
            data: [
              { value: 20, name: '风力发电' },
              { value: 30, name: '光伏发电' },
              { value: 30, name: '三联供发电' },
              { value: 20, name: '储能放电' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
                // shadowColor: '#005A5B'
              }
            }
          }
        ]
      }
      let option2 = {
        backgroundColor: '#033032',
        title: {
          text: '负荷',
          // subtext: '虚构数据',
          left: 'center',
          textStyle: {
            fontSize: 18, //字体大小
            color: '#ffffff' //字体颜色
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          // orient: 'vertical',
          // top: 'middle',
          textStyle: {
            fontSize: 13, //字体大小
            color: '#ffffff' //字体颜色
          },
          bottom: 10,
          left: 'center',
          data: ['储能充电', '空调', '照明回路', '直流排风扇']
        },
        color: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple'],
        series: [
          {
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            textStyle: {
              fontSize: 13, //字体大小
              color: '#ffffff' //字体颜色
            },
            label: {
              normal: {
                //饼形图显示格式
                formatter: '{b|{b}}  {per|{d}%}  ',
                rich: {
                  b: {
                    color: 'white',
                    fontSize: 14,
                    lineHeight: 33
                  },
                  //设置百分比数字颜色
                  per: {
                    color: '#00B4FB',
                    fontSize: 14,
                    padding: [2, 4],
                    borderRadius: 2
                  }
                }
              }
            },
            data: [
              { value: 432, name: '储能充电' },
              { value: 243, name: '空调' },
              { value: 432, name: '照明回路' },
              { value: 532, name: '直流排风扇' }
            ],
            // data: this.load,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
                // shadowColor: '#005A5B'
              }
            }
          }
        ]
      }
      myChart1.setOption(option1)
      myChart2.setOption(option2)
      //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
      window.addEventListener('resize', function() {
        myChart1.resize()
      })
      window.addEventListener('resize', function() {
        myChart2.resize()
      })
    },
    //时间格式转换器
    getNowFormatDate() {
      var date = new Date()
      var seperator1 = '-'
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var strDate = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate
      return currentdate
    },
    //通用时间格式转换器
    getFormatDate(date) {
      var seperator1 = '-'
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var strDate = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate
      return currentdate
    },
    //通用年月格式转换器
    getFormatMonth(date) {
      var seperator1 = '-'
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var strDate = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      var currentdate = year + seperator1 + month
      return currentdate
    },
    handleDelete(index, row) {
      alert(index)
      //  this.$router.push({path:'/details',query: {id:item.device_id}})
      this.$router.push({ path: '/indexx' })
      console.log(index, row)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },

    logout() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
    handler({ BMap, map }) {
      console.log(BMap, map)
    },
    infoWindowClose(i) {
      //  alert("关闭提示窗"+i.showFlag)
      return (i.showFlag = false)
    },
    infoWindowOpen(i) {
      // alert("打开提示窗"+i.showFlag)
      return (i.showFlag = true)
    },
    opencarinfo(item) {
      //  this.$router.push({name:'details',params: {id:'1'}})
      // alert("执行")

      this.$router.push({ path: '/details', query: { id: item.device_id } })
    }
  }
}
</script>
<style lang="scss" scoped>
#chart1 {
  width: 80%;
  height: 400px;
}
#chart2 {
  width: 80%;
  height: 400px;
}
#allmap {
  color: white;
  margin-left: 8%;
  margin-top: 60px;
  height: 700px;
}
font {
  font-size: 2rem;
}
.body {
  width: 100%;
  margin-top: 0px;
  background-image: url(../../assets/images/新UI12.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.el-main {
  width: 100%;
  height: 800px;
  margin-top: 40px;
  margin-left: 30px;
  // background-image: url(../../assets/images/新UI23.png);
  // background-repeat: no-repeat;
}
.el-button {
  margin-top: 20px;
  margin-left: 30%;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}

.aside {
  margin-left: 20px;
  margin-top: 20px;
  height: 560px;
}
</style>
